import { useIntersectionObserver } from "@vueuse/core"
import defaultImg from '@/assets/images/200.png'
import Message from './xtx-message.js'

const modules = import.meta.glob("./**/*.vue", { eager: true })

const defineDirective = (app) => {
    app.directive('imglazy', {
        mounted(el, { value },) {
            useIntersectionObserver(el, ([{ isIntersecting }]) => {
                if (isIntersecting) {
                    el.src = value
                    el.onerror = () => {
                        el.src = defaultImg
                    }
                }
            }, { threshold: [0] })
        }
    })
}
export default {
    install(app) {
        for (const key in modules) {
            const mod = modules[key]
            app.component(mod.default.name, mod.default)
        }

        defineDirective(app),
            app.config.globalProperties.$Message = Message
    }
}